<template>
	<view class="page">
		<!-- 搜索 -->
		<view class="search-head">
			<view class="back">
				<text></text>
			</view>
			<!--自选/行情切换-->
			<view class="order-tab">
				<view class="tab" :class="{'left':classType==0}" @click="onClassTab(0)">
					<text>自选</text>
					<!--text class="line"></text-->
				</view>
				<view class="tab" :class="{'right':classType==1}" @click="onClassTab(1)">
					<text>行情</text>
					<!--text class="line"></text-->
				</view>
			</view>
			<view class="more-icon" @click="onSearch">
				<view class="icon-list">
					<text class="iconfont icon-fadajing"></text>
				</view>
			</view>
		</view>
		<!-- 行情列表 -->
		<view class="goods-data" v-if="classType==1">
			<!-- 大盘指数数据 -->
			<!-- <view class="hot flex">
				<view class="flash-list flex-sub align-center" v-for="(item,index) in marketBat" :key="index">
					<view class="flash-title">
						<view class="title">{{item.name||'大盘名称'}}</view>
					</view>
					<view class="hot-list">
						<view class="list" :class="{'green':item.price_range<0}">
							<view class="big-mun">
								<text>{{parseFloat(item.current_price).toFixed(2)||'0.00'}}</text>
							</view>
							<view class="price">
								<text class="selling-price">{{item.price_range||'0.00'}}</text>
								<text class="original-price">{{item.price_rate||'0.00'}}%</text>
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class="recommend-info">
				<view class="recommend-title">
					<view class="title">
						<text class="title-name">热门行业</text>
						<text class="more" @click="toMoreList(0)">更多</text>
					</view>
				</view>
				<view class="hot-list">
					<view class="list" v-for="(item,index) in hotIndex" :key="index" @click="toHyinfo(item[0],item[1])">
						<view class="title">
							<text>{{item[1]||'行业名称'}}</text>
						</view>
						<view class="user-price">
							<text class="max" :class="{'green':parseFloat(item[5])<0}">
							{{parseFloat(item[5]).toFixed(2)||'0.00'}}%
							</text>
						</view>
						<view class="price-info">
							<view class="code-name">
								<text class="name">{{item[12]||'名称'}}</text>
								<text class="min" v-if="item[8]">
									<font class="on">{{(item[8]).slice(0,2)}}</font>
									{{(item[8]).slice(2,8)||'000000'}}
								</text>
								<text class="min" v-else>
									<font class="on">sh</font>
									000000
								</text>
							</view>
							<view class="code-price">
								<view class="max">{{parseFloat(item[9]).toFixed(2)||'0.00'}}%</view>
								<view class="min">{{parseFloat(item[10]).toFixed(2)||'0.00'}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="goods-list">
				<!-- 分类列表 -->
				<view class="classify-list">
					<view class="list" v-for="(item,index) in classList"
					:class="{'action':classifyShow==index}" :key="index" @click="onClassList(item,index)">
						<text>{{item.name}}</text>
						<text class="line" v-show="classifyShow==index"></text>
					</view>
				</view>
				<view class="list-li" v-for="(item,index) in cListData" @click="toDeails(item.code)" :key="index">
					<view class="item">
						<view class="title list">
							<text class="two-omit">{{item.name||'名称'}}</text>
							<text class="min">{{item.code||'000000'}}</text>
						</view>
						<view class="price list">
							<view class="retail-price">
								<text class="max" 
								:class="{'green':item.pricechange<0}">
								{{item.trade||'0.000'}}
								</text>
							</view>
						</view>
						<view class="applies list">
							<view class="tag"
							:class="{'green':item.pricechange<0}">
								<text>{{item.changepercent||'0.000'}}</text><text>%</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-countdown :show-day="false" :hour="0" :minute="0" :second="30" :reset="reset"
		@timeup="autoRefresh();">
		</uni-countdown>
		<!-- tabbar -->
		<TabBar :tabBarShow="classType===0?1:2"></TabBar>
	</view>
</template>

<script>
	var _self,loginRes;
	// 引入mescroll-mixins.js
	import TabBar from '../../components/TabBar/TabBar.vue';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import uniCountdown  from "@/components/CountDown/uni-countdown.vue"
	import Request from '@/js_sdk/luch-request/luch-request/index.js'
	const http = new Request();
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components:{
			TabBar,
			uniCountdown
		},
		data() {
			return {
				uid:'',
				token:'',
				reset: true,
				classType: 1,
				classifyShow: 0,
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				downOption: {},// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				upOption: {},// 上拉加载的配置(可选, 绝大部分情况无需配置)
				classList: [{id: 0,name: '涨幅榜',},{id: 1,name: '跌幅榜',}],
				cListData: '',
				marketBat: uni.getStorageSync('marketBat')||'',
				Top10List: uni.getStorageSync('Top10List')||'',
				Bot10List: uni.getStorageSync('Bot10List')||'',
				hotBat   : uni.getStorageSync('hotBat')||'',
				hotIndex : uni.getStorageSync('hotIndex')||'',
				confData : uni.getStorageSync('confData')||'',
			}
		},
		onLoad(){
			loginRes = this.checkLogin();
			if(!loginRes){return;}
			this.uid   = loginRes[0];
			this.token = loginRes[2];
		},
		onReady() {
			uni.hideTabBar();
		},
		onShow() {
			this.reset = true;
			this.autoRefresh();
		},
		onHide(){  //隐藏的时候 停止定时器和清空hqchart的实例
			this.reset = false;
		},
		onUnload(){   //退出的时候 停止定时器和清空hqchart的实例
			this.reset = false;
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			autoRefresh(){
				this.market();
				this.sinahy();
				if(this.classifyShow==0){
					this.getTop10(this.uid,this.token);//涨幅榜前十
					this.cListData = this.Top10List;
				}
				if(this.classifyShow==1){
					this.getBot10(this.uid,this.token);//跌幅榜前十
					this.cListData = this.Bot10List;
				}
			},
			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback(){
				this.market();
				this.sinahy();
				if(this.classifyShow==0){
					this.getTop10(this.uid,this.token);//涨幅榜前十
					this.cListData = this.Top10List;
				}
				if(this.classifyShow==1){
					this.getBot10(this.uid,this.token);//跌幅榜前十
					this.cListData = this.Bot10List;
				}
				this.mescroll.endSuccess();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				setTimeout(() =>{
					this.mescroll.endByPage(10, 20);
				},2000)
			},
			/* 返回点击*/
			onBack(){
				//uni.reLaunch({url: '/pages/home/home'});
				uni.navigateBack();
			},
			/*搜索点击*/
			onSearch(){
				uni.navigateTo({url:'/pages/search/search'})
			},
			/*股票列表点击*/
			toDeails(code){
				uni.navigateTo({
					//url: '/pages/GoodsDetails/Candle?code='+code,
					url: '/pages/MarketDetails/MarketDetails?code='+code,
					animationType: 'zoom-fade-out',
					animationDuration: 200
				})
			},
			onClassTab(type){
				switch(type){
					case 0: wx.switchTab({url:'/pages/Market/Market'}) 
					break;
					case 1: wx.switchTab({url:'/pages/discover/discover'}) 
					break;
				}
			},
			toMoreList(type){
				uni.navigateTo({url:'/pages/ClassIfy/ClassIfy'})
			},
			toHyinfo(node,name){
				uni.navigateTo({url:'/pages/ClassNode/ClassNode?node='+node+'&name='+name})
			},
			/*点击涨跌幅分类*/
			onClassList(item,index){
				this.classifyShow = index;
				if(index==0){
					this.getTop10(this.uid,this.token);//涨幅榜前十
					this.cListData = this.Top10List;
				}
				if(index==1){
					this.getBot10(this.uid,this.token);//跌幅榜前十
					this.cListData = this.Bot10List;
				}
			},
			async market(){//加载上证，深成，创业 指数
				http.get(this.apiServer+'/market/index/stock_bat?code=sh000001,sz399001,sh000300,sz399006',{
					header: {'content-type' : "application/x-www-form-urlencoded"}, 
				    dataType: 'json',
				    custom: {auth: true},
				}).then(res => {
					if(res.data.status){
						this.marketBat = res.data.data;
						uni.setStorageSync('marketBat' , res.data.data);
					}
				}).catch(err => {
					console.log('加载失败',err);
					//uni.showToast({title:"加载失败!",icon:"none"});
				})
			},
			/*热门行业*/
			async sinahy(){//加载行业板块
				http.get(this.apiServer+'/market/index/sinahy',{
					header: {'content-type' : "application/x-www-form-urlencoded"}, 
				    dataType: 'json',
				    custom: {auth: true},
				}).then(res => {
					if(res.data.status){
						var hotBat = res.data.data;
						hotBat.sort(function (a, b) {
						  return parseFloat(b[5]) - parseFloat(a[5]);//按照指定键值重新排序
						});
						this.hotIndex = hotBat.slice(0,6);
						this.hotBat   = hotBat;
						uni.setStorageSync('hotIndex' , hotBat.slice(0,6));
						uni.setStorageSync('hotBat' , hotBat);
					}
				}).catch(err => {
					console.log('加载失败',err);
					//uni.showToast({title:"加载失败!",icon:"none"});
				})
			},
			async getTop10(uid,token){
				http.get(this.apiServer+'/market/index/stock_top10',{
					header: {'content-type' : "application/x-www-form-urlencoded"}, 
				    dataType: 'json',
				    custom: {auth: true},
				}).then(res => {
					if(res.data.status){
						if(this.classifyShow==0)this.cListData = res.data.data;
						this.Top10List = res.data.data;
						uni.setStorageSync('Top10List' , res.data.data);
					}
				}).catch(err => {
					console.log('加载失败',err);
					//uni.showToast({title:"加载失败!",icon:"none"});
				})
			},
			async getBot10(uid,token){
				http.get(this.apiServer+'/market/index/stock_bot10',{
					header: {'content-type' : "application/x-www-form-urlencoded"}, 
				    dataType: 'json',
				    custom: {auth: true},
				}).then(res => {
					if(res.data.status){
						if(this.classifyShow==1)this.cListData = res.data.data;
						this.Bot10List = res.data.data;
						uni.setStorageSync('Bot10List' , res.data.data);
					}
				}).catch(err => {
					console.log('加载失败',err);
					//uni.showToast({title:"加载失败!",icon:"none"});
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import  'discover.scss';
</style>
